<script setup lang="ts">
// 数据就是视图 视图就是数据
import { ref, reactive } from "vue";
import axios from "axios";
//  const account = ref("ceshi06") // 账户
//  const password = ref("123456") // 密码
const loginForm = reactive<{
  account: string;
  password: string;
}>({
  account: "ceshi06",
  password: "123456",
});
const login = async () => {
  if (loginForm.account && loginForm.password) {
    //  if(account.value && password.value) {
    //    const res = await axios.post("https://meikou-api.itheima.net/login", {
    //         account: account.value,
    //         password: password.value
    //     })
    const res = await axios.post(
      "https://meikou-api.itheima.net/login",
      loginForm
    );
    alert(JSON.stringify(res.data));
  } else {
    alert("用户名和密码不能为空");
  }
};
</script>

<template>
  <div class="container">
    <div class="login_form">
      <input
        placeholder="请输入用户名"
        v-model="loginForm.account"
        type="text"
      />
      <input
        placeholder="请输入密码"
        v-model="loginForm.password"
        type="password"
      />
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_form {
  width: 400px;
  height: 300px;
  background-color: pink;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_form input,
buttom {
  margin: 10px 0;
  width: 100%;
  height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
